<template>
  <div class="about">
    <h1>联动运动</h1>
    <div id="box" class="box" ref="box"></div>
  </div>
</template>
<script>
//缓动动画公式：加速度=（结束值-起始值）/缓动系数    加速度由慢到慢
 import  funs  from '../../utils/animationUtil.js'
export default {
  name: 'test',
  mounted(){
    var box = this.$refs.box;
    box.addEventListener('mouseover',()=>{
        funs.yundongAndToumin(box, {'height':180},function(){
          funs.yundongAndToumin(box,{'width':0},function(){
             box.style['display']='none'
          })
        })
    })
  
  },
  methods:{

  }
}
</script>
<style scoped>

  #box{
    width: 200px;
    height: 200px;
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 10px;
  }

  .box{
    background-color: lightcoral;
     background:url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd4%2F1810%2Fbc%2F7bd51a60540d7bb5.gif_r_720x480x95_dff3b693.gif&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633919928&t=e426361c9a2e5c267d189df873a10da5') no-repeat;
     background-size:cover;
  }
</style>
